<template>
    <div>
        <Banner title='产品中心' flag="product"></Banner>
        <!-- navList   START -->
        <div class="container-fluild productContainer">
            <div class="container">
                <el-tabs v-model="tmId" class="navList" @click="changeNav">
                    <el-tab-pane :label="item.companyName" :name="item.id" v-for="item in tmList" :key="item.id">
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- navList   END -->
        <transition name="productList" appear class="animate__animated" enter-active-class="animate__zoomIn">
            <div class="container">
                <div class="row productList_row" :class="{ 'product_List_height': productHight }" v-loading="loading">
                    <div class="col-sm-6 col-md-4" v-for="product in productStore.productList" :key="product.id">
                        <div class="thumbnail productList_thumbnail" @click="goDetail(product.id)">
                            <img :src="product.imgUrl" :alt="product.name">
                            <div class="caption">
                                <h3>{{ product.name }}</h3>
                                <p>{{ product.content }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="productListBackground"></div>
        <!-- 分页器 -->
        <Pagination :page="page" :limit=limit :total="productStore.total" :tmId="tmId"></Pagination>
    </div>
</template>

<script setup lang="ts">
    import useProductStore from '@/store/modules/product.ts'
    import { ref, onMounted, computed, onUnmounted } from 'vue'
    import $bus from '@/bus/index.ts'
    import { useRouter, useRoute } from 'vue-router'

    const productStore = useProductStore()
    const router = useRouter()
    const route = useRoute()

    let tmId = ref(2023112301) //定义初始选择的导航
    let limit = ref(6) // 每页展示多少条数据
    let page = ref(1) // 当前是多少页
    let tmList = ref < any > ([]) // 品牌列表数据
    let productHight = ref(true)
    let loading = computed(() => productStore.isLoading)

    onMounted(() => {
        // 页面初次加载时如果是从详情页过来的即根据品牌id设置导航否则默认为第一个
        if (route.query.tmId && route.query.page) {
            tmId.value = Number(route.query.tmId)
            page.value = Number(route.query.page)
            $bus.emit('changePagination', page.value)
        }

        // 页面加载时判断是否是手机端
        if (document.documentElement.clientWidth < 768) {
            productHight.value = false
        } else {
            productHight.value = true
        }
        // 根据页面窗口大小设置产品列表高度防止切换分页时闪屏现象
        $bus.on('changeShowPagination', (flag: boolean) => {
            productHight.value = flag
        })
        getTmList() //初始化品牌列表
        getProductList() // 初始化产品列表


    })

    onUnmounted(() => {
        $bus.off(['changeShowPagination', 'clearPage']) // 销毁全局事件
    })
    // 点击产品进入产品详情
    const goDetail = (id: number) => {
        router.push({
            path: '/detail',
            query: {
                id: id
            }
        })
    }
    // 切换导航时触发
    const changeNav = (event: any) => {
        if (event.target.id) {
            const result = event.target.id.split('-')
            tmId.value = Number(result[1])
            page.value = 1
            getProductList()
            // 通知分页器组件清空page数据
            $bus.emit('clearPage', 1)
        }
    }
    // 获取品牌列表数据
    const getTmList = async () => {
        await productStore.getTm()
        tmList.value = productStore.tmList
    }
    // 获取产品分页数据
    const getProductList = async () => {
        productStore.limit = limit.value
        productStore.page = page.value
        productStore.tmId = tmId.value
        await productStore.getProducts()
    }
</script>

<style lang="scss">
    .productContainer {
        display: flex;
        background-color: #fff;
        height: 90px;
        width: 100%;
        background: url(./image/navImg.png) no-repeat;
        background-size: 100% 90px;

        .navList {
            height: 71px;
            line-height: 71px;
        }

        .el-tabs__nav-scroll {
            height: 71px;
            display: flex;
            align-items: center;
        }

        .el-tabs__item {
            font-family: 'Source Han Sans CN';
            font-size: 16px;
            font-weight: normal;
            color: #999;
            transition: color 0.2s linear;
            height: 71px;

            &:hover {
                color: #4F68AC;
            }
        }

        .is-active {
            color: #4F68AC;
            font-weight: bold;
            transition: all 0.2s linear;
        }

        .el-tabs__active-bar {
            background-color: #4F68AC;
        }
    }

    .product_List_height {
        height: 795px;
    }

    .productList_row {
        margin: 30px 10px 20px 10px;

        .productList_thumbnail {
            border: 0 solid #eeeeee;
            border-radius: 0px;
            padding: 20px 20px 10px 20px;
            margin-bottom: 40px;
            background-color: #fff;
            font-family: "Source Han Sans CN";
            text-align: left;
            line-height: 30px;
            cursor: pointer;
            transition: all 0.2s linear;
            overflow: hidden;

            &:hover {
                box-shadow: 1px 10px 34px 1px rgb(0 0 0 / 10%);
                transform: translateY(-3px);
            }

            img {
                width: 100%;
                background-color: #f8f8f8;
            }

            h3 {
                font-size: 18px;
                color: #333;
                margin-top: 20px;
                margin-bottom: 5px;
                overflow: hidden;
                /*不换行*/
                white-space: nowrap;
                /*溢出显示省略号*/
                text-overflow: ellipsis;
            }

            p {
                font-size: 14px;
                color: #999;
                overflow: hidden;
                /*不换行*/
                white-space: nowrap;
                /*溢出显示省略号*/
                text-overflow: ellipsis;
            }
        }
    }

    .productListBackground {
        background: linear-gradient(to bottom, #fff, #f8f8f8 5%, #f8f8f8);
        width: 100%;
    }

    /* 设置响应式 */
    /* 手机端 */
    @media (max-width: 768px) {
        .productContainer {
            padding-left: 0;
        }
    }

    /* pad端 */
    @media (min-width: 992px) {
        .productContainer {
            padding-left: 16%;
        }
    }

    /* PC端 */
    @media (min-width: 1200px) {
        .productContainer {
            padding-left: 20%;
        }
    }
</style>